<template>
	<view class="pic-content">
		<view class="pic-main">
			<scroll-view class="scroll-main" scroll-y>
				<view class="pic-vitem">
					<image v-for="(item, i) in defImgs" :src="getAlbumUrl(item)" :key="i"></image>
				</view>
			</scroll-view>
		</view>
		<button class="pic-newadd" @click="addPic">新增</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defImgs: []
			}
		},
		onLoad() {
			
		},
		onShow() {
			uni.showLoading();
			uni.request({
			    url: '/api/getScreenSaver',
			    success: (res) => {
					this.defImgs = res.data;
			    },
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		methods: {
			addPic() {
				/* uni.navigateTo({
					url: '/pages/page/webview?title=新增相册&link=/elephoto/elePhoto.html'
				}) */
				uni.navigateTo({
					url: '/pages/page/addpicture'
				})
			},
			getAlbumUrl(item) {
				return `${window.location.origin}` + item.url;
			}
		}
	}
</script>

<style>
	.pic-content {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.pic-main {
		flex: 1;
		position: relative;
	}

	.scroll-main {
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.pic-vitem {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 26rpx;
		padding: 26rpx;
	}

	.pic-vitem image {
		width: auto;
		height: 230rpx;
		border-radius: 8px;
	}

	.pic-newadd {
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		background-color: #0055ff;
		border-radius: 0;
		color: #fff;
	}
</style>